import React, {useState, useEffect} from 'react'
import style from './style.module.css'
import Search from '../../components/search/Search'
import HotHouse from './hotHouse/HotHouse'
// import AntSwiper from '../../components/antSwiper/AntSwiper'
import Swiper from '../../components/swiper/Swiper'
// 编程式导航
import { NavLink } from 'react-router-dom'
// 接口操作
import api from '../../api/index'

export default function Home() {
  // 轮播容器
  const [banner, setBanner] = useState([])
  // 热门房源
  const [list, setList] = useState([])
  // 生命周期函数---网络请求
  useEffect(() => {
    // TODO: 轮播接口
    api.getBanner()
    .then(res => {
      // console.log(res.data.data.banner);d
      setBanner(res.data.data.banner);
    })
    // TODO: 热门房源接口
    api.getHotHouse()
    .then(res => {
      // console.log(res.data.list);
      setList(res.data.list);
    })
  },[])
  return (
    <div>
      {/* 顶部--搜索框 */}
      <div className={style.header}>
        <div className={style.location}>
          <NavLink to='/city'>
            上海<span className='iconfont icon-jiantouxia'></span>
          </NavLink>
        </div>
        <div className={style.center}>
          { <Search/> }
        </div>
        <div className={style.shop}>购物车</div>
      </div>
      {/* 轮播区域 */}
      {/* <AntSwiper arr={banner} /> */}
      <Swiper arr={banner}/>
      {/* 热门房源 */}
      <div className={style.list}>
        <h3>热门房源</h3>
        <HotHouse list={list}/>
      </div>
    </div>
  )
}
